<template>
  <div class="app-container">
    <div class="filter-container">
      <div style="float:left;">
        <el-button class="filter-item" type="success" icon="el-icon-plus" style="margin-left: 10px;" @click="handleAdd">
          生成账单
        </el-button>
      </div>
      <!-- <el-popconfirm v-if="roleEdit" title="确定批量删除所选信息吗？" style="margin-left:10px;float:right" @onConfirm="deleteData()">
        <el-button slot="reference" type="danger" class="filter-item" icon="el-icon-delete">批量删除</el-button>
      </el-popconfirm> -->
    </div>
    <template>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column width="200px" prop="createTime" align="center" label="生成时间" />
        <el-table-column align="center" label="信息条数">
          <el-table-column width="100px" prop="infoNum" align="center" label="总条数" />
          <el-table-column width="100px" prop="numPaper" align="center" label="只登报纸" />
          <el-table-column width="100px" prop="numXcx" align="center" label="只登小程序" />
          <el-table-column width="140px" prop="numPaperAndXcx" align="center" label="报纸和小程序都登" />
        </el-table-column>
        <el-table-column align="center" label="金额">
          <el-table-column width="100px" prop="allPrice" align="center" label="总金额" />
          <el-table-column width="100px" prop="paperPrice" align="center" label="登报金额" />
          <el-table-column width="120px" prop="xcxPrice" align="center" label="登小程序金额" />
        </el-table-column>
        <el-table-column label="操作" min-width="300">
          <template slot-scope="scope">
            <el-button type="primary" size="small" style="margin-left: 10px;" @click="detail(scope.row.id)">账单详情</el-button>
            <el-button type="success" size="small" style="margin-left: 10px;" @click="exportBill(scope.row.id)">导出账单</el-button>

            <el-popconfirm v-if="isTop(scope.row.id)" title="确定取消生成该账单吗？" @onConfirm="removeVol(scope.row.id)">
              <el-button slot="reference" style="margin-left: 10px;" size="small" type="danger" icon="el-icon-delete">取消生成</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </template>
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: { Pagination },
  data() {
    return {
      selection: false,
      readOnly: false,
      timestamp: '',
      list: [
      ],
      total: 0,
      listLoading: true,
      listQuery: {
        companyName: '',
        status: 1,
        page: 1,
        limit: 10
      },
      Sortkey: '',
      Isace: '',
      multipleSelection: [],
      id: ''
    }
  },
  mounted() {
    this.getList()
  },
  created() {
    this.getList()
  },
  methods: {
    detail(id) {
      this.$router.push({ name: 'billDetail', query: { id: id }})
    },
    exportBill(id) {
      window.open(this.$http.defaults.baseURL + `api/busBill/exportBill?id=` + id)
    },
    handleAdd() {
      this.$http.post('/api/busBill/save')
        .then(response => {
          if (response.data.success) {
            this.getList()
            this.$message({
              message: '创建成功',
              type: 'success'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    isTop(id) {
      return this.listQuery.page === 1 && this.list[0].id === id
    },
    removeVol(id) {
      this.$http.post('/api/busBill/remove', { ids: [id] })
        .then(response => {
          if (response.data.success) {
            this.getList()
            this.$message({
              message: '成功取消生成',
              type: 'success'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getList() {
      const para = {
        orderField: this.Sortkey,
        orderType: this.Isace,
        pageNum: this.listQuery.page,
        pageSize: this.listQuery.limit
      }
      this.$http
        .post('/api/busBill/queryByPage', para)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            this.list = response.data.result.records
            this.total = response.data.result.total
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.listLoading = false
        })
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
